<template>
    <div>
        <!-- 有子菜单时 -->
        <el-submenu v-if="hasChildren" :index="item.index">
            <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>
            <menu-item v-for="child in item.children" :key="child.index" :item="child" />
        </el-submenu>

        <!-- 没有子菜单时 -->
        <el-menu-item v-else :index="item.index" :disabled="item.disabled">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
        </el-menu-item>
    </div>
</template>
 
<script>
export default {
    name: 'MenuItem',
    components: {
        MenuItem: () => import('./MenuItem.vue')
    },
    props: {
        item: {
            type: Object,
            required: true
        }
    },
    computed: {
        hasChildren() {
            return this.item.children && this.item.children.length > 0;
        }
    }
};
</script>

<style scoped>

</style>
  
